<template>

  <div v-loading="loading">
    <div><search-item 
    v-on:exportexcel="exportExcel"
    v-on:searchform="searchFrom"
    ></search-item></div>

 
    <div class="mt20">
      <el-table
        :data="tableData"
        border
        size="mini"
        width="1500"
      >
        <el-table-column
          prop="id"
          label="交易ID"
          width="260"
        >
        </el-table-column>
        <el-table-column
          width="120"
          prop="account"
          label="用户手机"
        >
        </el-table-column>
        <el-table-column
          prop="user_num"
          label="用户ID">
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="用户昵称">
        </el-table-column>
        <el-table-column
          prop="source"
          label="订单类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type==1">购买课程</span>
            <span v-else-if="scope.row.type==2">购买短信</span>
            <span v-else-if="scope.row.type==3">打赏课程</span>
            <span v-else-if="scope.row.type==4">打赏视频</span>
            <span v-else-if="scope.row.type==5">打赏直播</span>
          </template>
        </el-table-column>

        <el-table-column

          prop="description"
          label="描述">
      >
    
        </el-table-column>

        <el-table-column
        
          width="150"
          label="订单来源">
          <template slot-scope="scope">
            {{scope.row.source==='1'?'PC':(scope.row.source==='2'?'Android':(scope.row.source==='3'?'IOS':'WEB'))}}
          </template>
        </el-table-column>

        <el-table-column
        prop="order_pearl"
        width="150"
        label="订单珍珠">
      </el-table-column>
        <el-table-column
          prop="order_time"
          width="150"
          label="交易完成时间">
        </el-table-column>
        <el-table-column
          label="退款状态">
          <template slot-scope="scope">
            {{scope.row.refund_status==='0'?'未退款':(scope.row.source==='1')?'退款中':'已退款'}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.type==1&&scope.row.refund_status==0" type="text" size="mini" @click="refundMoney(scope.row.id)">退款</el-button>
          </template>
        </el-table-column>
         <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.refund_status!=1" size="mini" @click="backMoney(scope.row)"> 退款 </el-button> 
          </template>
        </el-table-column>
      </el-table>

     
<page-pagination 
      v-on:pageFun="pageFunNumber" 
      :page="page" 
      :pageSize="pageSize" 
      :total="total">
    </page-pagination>


    </div>
  
  </div>
</template>
<script>
import pagePagination from "@/components/Common/pagePagination";
import service from "@/service";
import searchItem from "./tradeSearch";
export default {
  
  data() {
    return {
      tableData: [],
      loading: false,
      page: 1,
      pageSize: 15,
      total: 0,
      paramsObj: {}
    };
  },
  mounted() {
    this.getQueryDataList();
  },
  methods: {
    async getQueryDataList(page = 1) {
      this.loading = true;
      let params = {
        page: page,
        pageSize: this.pageSize
      };
      let obj = Object.assign({}, params, this.paramsObj);
      let result = await service.haiBeiServerTradeList(obj);
      if (result.success) {
        this.tableData = result.result.pageList;
        this.loading = false;
        this.total = result.result.nums;
        this.pageSize = result.result.pageSize;
        this.page = result.result.page;

      }
    },
    pageFunNumber(val) {
      this.getQueryDataList(val);
    },
    //到处excel
    async exportExcel(arg) {
      this.loading = true;
      let params = {
        page: this.page,
        pageSize: this.pageSize
      };
      let obj = Object.assign({}, params, arg);
      let res = await service.haiBeiServerExportExcelTradeList(obj);
      if (res.success) {
        let url = service.haiBeiServerDownloadlTradeList(res.result.file,res.result.showName);
        this.loading = false;
        let downloadID = document.getElementById("downloadID");
      
            this.$message({
              type: "success",
              message: '导出成功'
            });
        if (downloadID) {
          downloadID.setAttribute("action", url);
          downloadID.click();
        } else {
          let createA = document.createElement("a");
          createA.style.display = "none";
          createA.setAttribute("id", "downloadID");
          createA.setAttribute("href", url);
          createA.setAttribute("target", "get");
          document.body.appendChild(createA);
          setTimeout(() => {
            createA.click();
          }, 400);
        }
      }else{
        this.$message({
          type: "error",
          message: res.msg
        });
         this.loading = false;

      }
    },
    funDownload(content, filename) {
      var eleLink = document.createElement("a");
      eleLink.download = filename;
      eleLink.style.display = "none";
      // 字符内容转变成blob地址
      var blob = new Blob([content]);
      eleLink.href = URL.createObjectURL(blob);
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    },
    //退款
    backMoney(arg) {
      this.$confirm(`您确定要为该条数据退款吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        lockScroll: false
      }).then(() => {
        this.opeartionMoney(arg);
      });
    },
    async opeartionMoney(arg) {
      let res = await service.haiBeiServerBackMoneyTradeList({
        id: arg.id
      });
      if (res.success) {
        this.$message({
          type: "success",
          message: res.msg
        });
        arg.refund_status = 1;
      }
    },
    //查询
    searchFrom(arg) {
      this.paramsObj = arg;
      this.getQueryDataList();
    }
  },
  components: {
    searchItem,
    pagePagination
  }
};
</script>

